<!DOCTYPE html>
<html lang="en" ng-app="app">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>一个简单的小程序</title>

    <!-- Bootstrap core CSS -->
    <link href="http://v3.bootcss.com/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="http://v3.bootcss.com/examples/sticky-footer/sticky-footer.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <body ng-controller="simple-calculation-program as vm">

    <!-- Begin page content -->
    <div class="container">
      <div class="page-header">
        <h1>一个简单的计算小程序</h1>
      </div>
      <p class="lead">给定总金额、和产品品种数量以及产品的单价，求产品总价等于总金额的各产品数量。</p>
      <p>PS: 本程序不对输入数据进行数据类型的校验，所以请确保输入数值是类型正确的。</p>
      <hr />

      <div class="row">
        <div class="col-md-8">
          <p>在下面文本框中输入给定的总金额。</p>
          <div class="input-group" style="margin-bottom: 60px;">
            <span class="input-group-addon">￥</span>
            <input type="text" class="form-control" placeholder="此处输入给定的总金额" ng-model="vm.amont">
          </div>
        </div>
      </div>

      <p>在下面表格中输入产品单价，每行一个产品，你可以 <button type="button" class="btn btn-primary" ng-click="vm.products.push({})">新增</button> 一个产品，添加完成后进行 <button type="button" class="btn btn-info" ng-click="vm.calculation()">计算</button> 。</p>
      <table class="table table-bordered">
        <thead>
          <tr>
            <th>单价</th>
            <th ng-repeat="num in vm.products[0].nums" ng-bind="'组合#' + ($index + 1)"></th>
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat="product in vm.products">
            <td style="width:180px;"><input class="form-control" placeholder="产品单价" type="text" ng-model="product.price"></td>
            <td ng-repeat="num in product.nums">{{num | number}}</td>
        </tbody>
      </table>

      <p ng-if="vm.processing">计算进行中，请等待，在总金额和产品数量较多的情况下，有可能会超时!<p>
      <p ng-if="vm.complated && vm.products[0].nums.length == 0">计算完成，当前数据不能算出需要的结果!<p>
      <p ng-if="vm.complated && vm.products[0].nums.length > 0">计算完成，共计 {{vm.products[0].nums.length}} 组结果!<p>
    </div>

    <div class="footer">
      <div class="container">
        <p class="text-muted">不要版权。感谢<a href="http://git.oschina.net/kelely/simple-calculation-program" target="_blank"><img class="ui inline image" src="./asserts/logo.svg" style="height: 30px; width: 90px; padding-left: 0.5em;">
</a> 提供源代码托管服务。</p>
      </div>
    </div>


    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="http://v3.bootcss.com/assets/js/ie10-viewport-bug-workaround.js"></script>
    <script src="http://cdn.bootcss.com/angular.js/1.6.0/angular.min.js"></script>
    <script type="text/javascript">
        angular
            .module('app', [])
            .controller('simple-calculation-program', [
                function() {
                    var vm = this;

                    vm.complated = false;
                    vm.processing = false;
                    vm.times = 1;       // 总共计算次数

                    vm.amont = 1000;
                    vm.products = [
                        {price:40, nums: [10,20]},
                        {price:70, nums: [11,20]},
                        {price:80, nums: [11,20]},
                        {price:90, nums: [11,20]},
                        {price:56, nums: [11,20]}
                    ];

                    vm.doit = function() {
                        angular.forEach(vm.products, function(product) {
                            for(var num = 0; num <= product.max; num ++) {
                                console.log(num);
                            }
                        });
                    };

                    vm.calculation = function() {
                        vm.complated = false;
                        vm.processing = true;
                        vm.times = 1;
                        if(!(vm.amont && vm.amont > 0)) {
                            alert('需要输入总金额!')
                        }

                        // 清理数据，变成 [
                        // [ price, mix, max    
                        // ]
                        var times = 1;
                        angular.forEach(vm.products, function(product) {
                            product.nums = [];
                            product.min = 0;

                            // 当前产品最大数量
                            product.max = Math.floor(vm.amont / product.price);
                            vm.times = vm.times * product.max;
                        });

                        vm.doit();

                        vm.processing = false;
                        vm.complated = true;
                    };
                }
            ]);
    </script>
  </body>
</html>
